<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>lable</title>
  <script src="./vue/vue.js"></script>
</head>
<body>
<!--混入 mixin-->
<div id="sd">
  mixin 内的数据:{{name}}<br>
  vue 内的数据:{{age}}
</div>
<!--选项合并-->
<div id="ssa">
  数量是:{{sum}}
</div>
<!--data的合并-->
<div id="da">
  a:{{a}}
  b:{{b}}
  c:{{c}}
</div>
<!--钩子函数合并-->
<div id="gou">
</div>
<!--值为对象的选择合并-->
<div id="zhi">
  111
  xiaoming:{{xiaoming()}}
  xiaoxiao:{{xiaoxiao()}}
  dsad:{{dsad()}}
</div>
<script>
  // 混入 mixin
  var jj = {
    data() {
      return {
        name: '你好'
      };
    },
    created: function() {
      this.mixinFun();
    },
    methods: {
      mixinFun: function() {
        console.log('mixin ccc');
      }
    }
  };
  var vue = new Vue({
    el: '#sd',
    mixins: [jj],
    data() {
      return {
        age: '11'
      };
    }
  });
  // 选项合并
  var cc = {
    data() {
      return {
        sum: '10'
      };
    },
    created: function() {
      this.miFun();
    },
    methods: {
      miFun: function() {
        console.log('nihao');
      }
    }
  };
  var sds = new Vue({
    el: '#ssa',
    mixins: [cc],
    data() {
      return {
        sum: '11'
      };
    }
  });
  // data的合并
  var dami = {
    data() {
      return {
        a: 'nihao',
        b: 'bss',
        c: 'asdasd'
      };
    },
    created: function() {
      this.miFun2();
    },
    methods: {
      miFun2: function() {
        console.log('nihao');
      }
    }
  };

  var jss = new Vue({
    el: '#da',
    mixins: [dami],
    data() {
      return {
        a: 'bushi',
        b: 'haoba'
      };
    }
  });

  // 钩子函数合并
  var goumixi = {
    created() {
      alert('mixin钩子函数');
    }
  };
  var gou = new Vue({
    el: '#gou',
    mixins: [goumixi],
    created() {
      alert('vue中的钩子函数');
    }
  });
  // 值为对象的选择合并
  var mixinsZhi = {
    methods: {
      xiaoming() {
        console.log('sdfsd');
      },
      xiaoxiao() {
        console.log('nicaishi');
      },
      dsad() {
        console.log('sadas');
      }
    }
  };
  var zhi = new Vue({
    el: '#zhi',
    mixins: [mixinsZhi],
    methods: {
      xiaoming() {
        console.log('你');
      },
      xiaoxiao() {
        console.log('好家伙');

      }
    }
  });

</script>
</body>
</html>
